<template>
<q-item class="slider">
  <q-item-section>
    <q-slider
      :class="'color-theme-'+color"
      v-model="val"
      :min="min"
      :max="max"
      label
      label-color="dark"
      :color="color"
      @input="changeValue"
    />
  </q-item-section>
  <q-item-section side>
<!--    <div class="set-value">-->
<!--      <button type=""></button>-->
<!--    </div>-->
    <q-input outlined dense v-model.number="val"
             type="number"
             @input="changeValue"
             class="set-value" input-class="text-center">
      <template v-slot:prepend>
        <q-btn @click="reduce" class="set-value-btn reduce-btn" dense flat icon="remove" />
<!--        <q-btn dense flat label="-" style="border-right: 1px solid #d3d3d3;width: 32px" />-->
      </template>
      <template v-slot:append>
        <q-btn @click="add" class="set-value-btn add-btn" dense flat icon="add" />
<!--        <q-btn dense flat label="+" style="border-left: 1px solid #d3d3d3;width: 32px" />-->
      </template>
    </q-input>
  </q-item-section>
</q-item>
</template>

<script>
export default {
  name: 'index',
  props: {
    value: {
      type: Number || String,
      default: 0
    },
    min: {
      type: Number || String,
      default: 0
    },
    max: {
      type: Number || String
    },
    color: {
      type: String,
      default: 'primary'
    }
  },
  data () {
    return {
      val: 0
    }
  },
  watch: {
    value (val) {
      this.val = val
    }
  },
  mounted () {
    this.val = this.value
  },
  methods: {
    // 增加
    add () {
      this.val = this.value >= this.max ? this.max : this.value + 1
      this.$emit('input', this.val)
    },
    // 减少
    reduce () {
      this.val = this.value <= this.min ? this.min : this.value - 1
      this.$emit('input', this.val)
    },
    // 值改变
    changeValue (val) {
      if (val === '' || val === ' ' || val < this.min) {
        this.val = this.min
      }
      if (val > this.max) {
        this.val = this.max
      }
      this.val = parseInt(this.val)
      this.$emit('input', this.val)
    }
  }
}
</script>

<style scoped lang="stylus">
.slider{
  padding-left 0
  height 76px
  padding-bottom 0
  .set-value{
    width 124px
    border-radius 6px
    overflow hidden
  }
  .set-value-btn{
    width 32px
    height 100%
    font-size 10px
    color #999
    background-color #f9f9f9
    border 1px solid #d3d3d3
    &.reduce-btn{
      border-radius 6px 0 0 6px
    }
    &.add-btn{
      border-radius 0 6px 6px 0
    }
  }
}
</style>
<style lang="stylus">
.slider{
  .q-item__section{
    justify-content flex-end
  }
  /*输入框*/
  .q-field--outlined .q-field__control{
    padding 0
    &:hover:before{
      border-color #d3d3d3
    }
  }
  .q-field--outlined .q-field__control:after{
    border-color transparent
  }
}
</style>
